<div class="account-main-section main-height text-white">
    <div class="channel-content">
        <h3 class="channel-content-header" style="margin-top: 6%; margin-left: 5%;" i18n>Set Password</h3>
        <div class="text-center">
            <div class="row" style="margin-bottom: 4%;">
                <div class="col-md-3 col-xs-12"></div>
                <div class="col-md-5 col-xs-12">
                    <div class="row">
                        <div class="col-md-4 col-xs-12" style="margin-top: 8px;">
                            <label i18n>new password：</label>
                        </div>
                        <div class="col-md-8 col-xs-12">
                            <input class="form-control my_input" type="password" name="newpass" [(ngModel)]="changePass.password" #newpass="ngModel" (keyup)="isPwdsame()" minlength="8" placeholder="please enter your password that you want to set" i18n-placeholder required="required"/>
                            <div class="alert alert-danger" *ngIf="newpass.invalid && (newpass.dirty || newpass.touched)">
                                <div *ngIf="newpass.errors.required" i18n>
                                    Newpassword is required!
                                </div>
                                <div *ngIf="newpass.errors.minlength" i18n>
                                    Password must be at least 8 characters long.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-xs-12"></div>
            </div>
            
            <div class="row">
                <div class="col-md-3 col-xs-12"></div>
                <div class="col-md-5 col-xs-12">
                    <div class="row">
                        <div class="col-md-4 col-xs-12" style="margin-top: 8px;">
                            <label i18n>repeat password：</label>
                        </div>
                        <div class="col-md-8 col-xs-12">
                            <input class="my_input form-control" type="password" name="repass" [(ngModel)]="changePass.repassword" #repass="ngModel" (keyup)="isPwdsame()" minlength="8" placeholder="Please enter your password again" i18n-placeholder required="required"/>
                            <div class="alert alert-danger" *ngIf="!isPwdvalid" i18n>
                                The two input password must be consistent!
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-xs-12"></div>
            </div>
            <div class="row">
                <div class="col-md-3 col-xs-12"></div>
                <div class="col-md-5 col-xs-12">
                    <div class="row mt-50">
                        <div class="col-md-12 col-xs-12">
                            <button class="btn btn-primary btn-block" (click)="submitPassword(changePass.password)" [ngClass]="{'btn-primary':(changePass.password!='' && changePass.repassword!='' && changePass.password == changePass.repassword)}"  i18n>Submit</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-xs-12"></div>
            </div>
        
    </div>

</div>

